@import '@/styles/variables.scss';
@import '@/styles/mixins.scss';

.site-layout {
  min-height: 100vh;
}

.site-header {
  @include flex(row, space-between, center);
  background: white;
  padding: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  position: sticky;
  top: 0;
  z-index: 1000;
  height: 64px;
  width: 100%;

  &-left {
    @include flex(row, flex-start, center);
    padding-left: $spacing-lg;

    .trigger {
      font-size: 18px;
      cursor: pointer;
      transition: color 0.3s;
      padding: $spacing-md;

      &:hover {
        color: $primary-color;
      }
    }

    .logo {
      @include flex(row, center, center);
      margin-left: $spacing-md;
      
      .logo-icon {
        font-size: 24px;
        color: $primary-color;
      }

      .logo-text {
        color: $heading-color;
        font-size: 18px;
        font-weight: 600;
        margin-left: $spacing-sm;
      }
    }
  }

  &-right {
    @include flex(row, flex-end, center);
    padding-right: $spacing-lg;

    .action-item {
      padding: $spacing-sm $spacing-md;
      cursor: pointer;
      @include transition;

      &:hover {
        background: rgba(0, 0, 0, 0.025);
      }

      .anticon {
        font-size: 16px;
        color: rgba(0, 0, 0, 0.65);
      }
    }

    .user-info {
      @include flex(row, center, center);
      padding: $spacing-sm $spacing-md;
      cursor: pointer;
      @include transition;

      &:hover {
        background: rgba(0, 0, 0, 0.025);
      }

      .avatar {
        background: $primary-color;
      }

      .name {
        margin: 0 $spacing-sm;
        color: $heading-color;
      }
    }
  }
}

.site-sider {
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08);
  
  .site-menu {
    border-right: none;
    padding: $spacing-md 0;
  }
}

.site-content {
  padding: $spacing-lg;
  background: #f0f2f5;
} 